<template>
    <div class="latest">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="latest-list">
            <div class="latest-list__item" v-for="item in list" :key="item.id">
              <div class="top">
                <img class="avatar" :src="item.avatar" alt="">
                <div class="list-item__head">
                  <div>
                    <div class="username">
                      <span>{{ item.nickname || item.username }}</span>
                      <span class="vip" v-if="item.is_vip">VIP</span>
                    </div>
                    <p class="text1-2">{{ item.mtime }}</p>
                  </div>
                  <van-button round type="default" size="small" v-if="item.is_follow === 0">关 注</van-button>
                </div>
              </div>
              <div class="list-item__main">
                <div class="list-item__content">
                  <div class="text">{{ item.content }}</div>
                  <div class="list-img__item" v-if="item.images.length">
                    <van-image
                      v-for="(src, index) in item.images"
                      :key="index"
                      width="100%"
                      height="100"
                      fit="cover"
                      :radius="6"
                      lazy-load
                      :src="src"
                      @click="_previewImg(item.images, index)"
                    />
                  </div>
                  <van-tag plain>#{{ item.category_name }}</van-tag>
                </div>
                <div class="list-item__icon">
                  <div>
                    <van-icon name="like-o" size="18" />
                    <span>{{ item.like_num }}</span>
                  </div>
                  <div>
                    <van-icon name="eye-o" size="18" />
                    <span>{{ item.view_num }}</span>
                  </div>
                  <div>
                    <van-icon name="chat-o" size="18" />
                    <span>{{ item.comment_num }}</span>
                  </div>
                  <div>
                    <van-icon class-prefix="fa fa-share" />
                    <span>{{ item.share_num }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
</template>

<script>
export default {
    name: 'latest',
    data () {
        return {
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            page: 0
        }
    },
    methods: {
        onLoad () {
            this.$http.article.list({
                page: this.refreshing ? this.page = 1 : this.page += 1
            }).then(({ code, data }) => {
                if (this.refreshing) {
                    this.list = []
                    this.refreshing = false
                }
                if (code === 200) {
                    if (data.total_page === 0 || data.total_page === data.current_page) {
                        this.finished = true
                    }
                    if (data.current_page === 1) {
                        this.list = data.list
                    } else {
                        this.list = this.list.concat(data.list)
                    }
                }
                this.loading = false
            })
        },
        onRefresh () {
            // 清空列表数据
            this.finished = false

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true
            this.onLoad()
        },
        _previewImg (images, index) {
            this.$imagePreview({
                images,
                startPosition: index,
                onClose () {
                    // do something
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.latest {
  &-list {
    &__item {
      background-color: #ffffff;
      margin-bottom: 10px;
      padding: 15px;
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .list-img__item {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 6px;
        margin-bottom: 10px;
      }
      .avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .list-item__main {
        flex: 1;
      }
      .list-item__head {
        display: flex;
        justify-content: space-between;
        flex: 1;
        .username {
          margin-bottom: 10px;
          span:first-child {
            font-size: 13px;
          }
        }
        .vip {
          background-color: rgba(255, 152, 0, 0.8);
          color: #ffffff;
          font-size: 12px;
          border-radius: 1rem;
          padding: 0 6px;
          letter-spacing: 2px;
          margin-left: 5px;
        }
      }
      .list-item__content {
        margin-top: 20px;
        margin-bottom: 10px;
        .text {
          margin-bottom: 10px;
        }
      }
      .list-item__icon {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        >div {
          display: flex;
          align-items: center;
          i {
            margin-right: 5px;
          }
          span {
            color: #999999;
          }
        }
      }
    }
  }
}
</style>
